import "./index.scss"
import {Row,Col,Typography ,Tabs , Form , Input , Button ,Checkbox,message} from "antd"
import { useEffect, useRef } from "react"
import {reg} from "../../utils/validate"
import {LockOutlined,UserOutlined,PhoneOutlined} from "@ant-design/icons"
import { $http } from "../../api"


const {Title}=Typography
const {pwd,phone}=reg
export default function Register({history,match}){
    // useEffect(()=>{
    //     $http.use({

    //     })
    // })
    const form=useRef()
    const dbpass=useRef()
    const onFinish=(value)=>{
        if(value.password!=value.dbpassword){
            message.error("两次密码不一致") 
            dbpass.current.focus()
        }else{
            $http.register({
                ...value,
                role:0
            })
            .then(res=>{
                if(res.code==200){
                   history.push("/login?accout="+value.account)
                }
            })
        }
    }
    const onFailed=()=>{

    }
    const layout = {
        labelCol:{
            span:6,
            offset:1
        },
        wrapperCol:{
            span:16
        }
    }
    
    const tailLayout = {
        wrapperCol:{
            span:16,
            offset:7
        }
    }

    return(
        <div className="login">
            <div >
                <video 
                    className="myvideo" 
                    id="myvideo" 
                    autoPlay  
                    loop  
                    playsInline
                    muted
                    src="https://play.feihuo.com/bizhi/video/new_video/shortVideo/20210827/c49fcf10e6a25f0d143261c50b13188c_wm.mp4"
                ></video>
            </div>
            <Row className="mybox">
                <Col className="login-box" xs={22} sm={18} md={14} lg={12} xl={6} xxl={4}>
                    <Title  level={3}>
                        欢迎学员注册
                    </Title>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{    // 设置表单的初始值
                        }}
                        onFinish={onFinish}
                        onFinishFailed = {onFailed}
                        ref={form}
                        {...layout}
                    >   
                        <Form.Item
                            name="account"
                            label="用户名"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item
                            name="phone"
                            label="手机号"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号',
                                },
                                {
                                    pattern:phone,
                                    message:"请输入正确的手机号码"
                                }
                            ]}
                        >
                            <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            label="登录密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入登录密码',
                                },
                                {
                                    pattern: pwd,
                                    message: '请输入6-16位数字加字母的登录密码',
                                },
                            ]}
                        >
                            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入登录密码" />
                        </Form.Item>
                        <Form.Item
                            name="dbpassword"
                            label="确认密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入确认密码',
                                },
                                {
                                    pattern: pwd,
                                    message: '请输入6-16位数字加字母的登录密码',
                                },
                            ]}
                        >
                            <Input.Password  ref={dbpass} prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入登录密码" />
                        </Form.Item>
                        <Form.Item
                            {...tailLayout}
                        >
                            <Button block type="danger" htmlType="submit" >注册</Button>
                        </Form.Item>    
                        <Form.Item
                            {...tailLayout}
                            className="links"
                        >
                            <span onClick={()=>history.push("/login")} style={{color:"#f50"}}>已有账号,请登录</span>
                            <span onClick={()=>history.push("/forgetpass")} style={{color:"#0f0"}}>
                                忘记密码
                            </span>
                        </Form.Item>    
                    </Form>

                </Col>
            </Row>
        </div>
    )
}